<template>
  <div class="footer-box">
    <van-goods-action>
      <van-goods-action-icon icon="chat-o" text="客服" color="#ee0a24" />
      <van-goods-action-icon
        icon="cart-o"
        text="购物车"
        icon.class="true"
        @click="toShoppingCar"
      />
      <van-goods-action-icon
        icon="star"
        text="已收藏"
        color="gray"
        @click="collect"
      />
      <van-goods-action-button
        type="warning"
        text="加入购物车"
        @click="onClickButton"
      />
      <van-goods-action-button
        type="danger"
        text="立即购买"
        @click="onClickButton"
      />
    </van-goods-action>

    <!-- 弹出框 -->
    <van-sku
      v-model="show"
      :sku="sku"
      :goods="goods"
      :goods-id="goodsId"
      :hide-stock="sku.hide_stock"
      @buy-clicked="onBuyClicked"
      @add-cart="onAddCartClicked"
    />
  </div>
</template>

<script>
import axios from "axios";
import { Toast } from "vant";
export default {
  name: "DetailFooter",
  data() {
    return {
      show: false,
      goodsId: "001",
      arr: {},
      // 数据结构见下方文档
      sku: {
        // 所有sku规格类目与其值的从属关系，比如商品有颜色和尺码两大类规格，颜色下面又有红色和蓝色两个规格值。
        // 可以理解为一个商品可以有多个规格类目，一个规格类目下可以有多个规格值。
      },
      goods: {
        // 数据结构见下方文档
      },

      skuData: {
        // 商品 id
        goodsId: "1",
        // 选择的商品数量
        selectedNum: 1,
        // 选择的 sku 组合
        selectedSkuComb: {
          id: 1,
          price: "4.5",
          s1: "1",
          s2: "2",
          stock_num: 111,
          property_price: 1,
          previewImgUrl: "",
        },
      },
    };
  },
  methods: {
    toShoppingCar() {
      this.$router.push("/Cart");
    },
    collect() {
      Toast("已加入收藏");
    },
    onClickButton() {
      this.show = true;
    },
    // toShoppingCar collect
    onAddCartClicked(val) {
      console.log("val", val);
      // axios.post(url,data,{配置}).then(成功回调(res)).catch(失败回调(res))
      axios.post(
        "/cart",
         {
          goodsId: val.goodsId,
          goodsprice: val.selectedSkuComb.price/10,
          goodsimg: this.img,
          goodsname: this.name,
          isChecked: false,
          count: val.selectedNum,
        },
      ).then((res) => {
        console.log("res", res);
        if (res.data) {
          this.$toast.success("加入成功");
        } else {
          this.$toast.success("加入失败");
        }
      });
      this.$router.push("/Cart");
    },
    onBuyClicked(val) {
      console.log(val);
    },
  },
  created() {
    //   console.log("this.$route", this.$route.query.id); //匹配到当前路由对象；001
    axios({
      url: "/goods?id=" + this.$route.query.id,
    }).then((res) => {
      this.arr = res.data[0];
      this.goodsId = this.arr.id;
      this.name=this.arr.name
 this.img= this.arr.img,
      (this.sku = {
        tree: [
          {
            k: "颜色", // skuKeyName：规格类目名称
            k_s: "s1", // skuKeyStr：sku 组合列表（下方 list）中当前类目对应的 key 值，value 值会是从属于当前类目的一个规格值 id
            v: [
              {
                id: "1", // skuValueId：规格值 id
                name: "红色", // skuValueName：规格值名称
                imgUrl: this.arr.img2, // 规格类目图片，只有第一个规格类目可以定义图片
                previewImgUrl: this.arr.img2, // 用于预览显示的规格类目图片
              },
              {
                id: "2",
                name: "蓝色",
                imgUrl: this.arr.img,
                previewImgUrl: this.arr.img,
              },
            ],
            largeImageMode: true, //  是否展示大图模式
          },
        ],
        // 所有 sku 的组合列表，比如红色、M 码为一个 sku 组合，红色、S 码为另一个组合
        list: [
          {
            id: this.arr.id, // skuId
            s1: "1", // 规格类目 k_s 为 s1 的对应规格值 id
            s2: "1", // 规格类目 k_s 为 s2 的对应规格值 id
            price: this.arr.price + "0", // 价格（单位分）
            stock_num: 110, // 当前 sku 组合对应的库存
          },
          {
            id: this.arr.id, // skuId
            s1: "2", // 规格类目 k_s 为 s1 的对应规格值 id
            s2: "2", // 规格类目 k_s 为 s2 的对应规格值 id
            price: this.arr.price + "0", // 价格（单位分）
            stock_num: 110, // 当前 sku 组合对应的库存
          },
        ],
        price: this.arr.price, // 默认价格（单位元）
      
        stock_num: 227, // 商品总库存
        collection_id: 2261, // 无规格商品 skuId 取 collection_id，否则取所选 sku 组合对应的 id
        none_sku: false, // 是否无规格商品
        messages: [],
        hide_stock: false, // 是否隐藏剩余库存
      }),
        (this.goods = {
          // 弹出框上边图显示
          picture: this.arr.img,
        });
    });
  },
};
</script>

<style scoped>
.footer-box {
  width: 100%;
  height: 100%;
}
</style>
